<template>
  <div class="data">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>设备列表</span>
        </div>
      </template>
    </el-card>
    <div class="flex jc-sb">
      <el-card class="box-card2 mt-10">
        <template #header>
          <div class="card-header">
            <span>设备概览</span>
            <el-button class="button" text>绑定设备</el-button>
          </div>
        </template>
        <div class="text item flex jc-sa aic">
          <img
            src="http://nongye.huruqing.cn/img/gateway.5aeeb219.png"
            alt=""
          />
          <div class="interval"></div>
          <div class="gateway1">
            <p class="gateway-box">{{ LoRaPP.total }}</p>
            <p class="gateway-box2">LoRaWAN</p>
            <p class="gateway-box3">网关</p>
          </div>
          <div class="interval"></div>
          <div class="gateway1">
            <p class="gateway-box">{{ LoRaWAN.total }}</p>
            <p class="gateway-box2">LoRaPP</p>
            <p class="gateway-box3">网关</p>
          </div>
          <div class="interval"></div>
          <div class="gateway1">
            <p class="gateway-box">{{ group.group }}</p>
            <p>&nbsp;</p>
            <p class="gateway-box3">群组</p>
          </div>
          <div class="interval2"></div>
          <i
            data-v-725f3661=""
            class="icon iconfont icon-yalichuanganqi f999 fonts"
          ></i>
          <div class="gateway1">
            <p class="gateway-box">{{ sensor.total }}</p>
            <p class="gateway-box3">传感器节点</p>
          </div>
        </div>
      </el-card>

      <el-card class="box-cardleft mt-10">
        <template #header>
          <div class="card-headerleft">
            <span>监控</span>
          </div>
        </template>
        <div class="textleft itemleft flex fdc jc-sa">
          <div class="monitoring">
            <div class="monitoring-box flex jc-sb">
              <span class="text">网关离线</span>
              <button class="number">
                {{ LoRaPP.offline + LoRaWAN.offline }}
              </button>
            </div>
          </div>
          <div class="monitoring">
            <div class="monitoring-box flex jc-sb">
              <span class="text">节点离线</span>
              <button class="number">{{ offline }}</button>
            </div>
          </div>
          <div class="monitoring">
            <div class="monitoring-box flex jc-sb">
              <span class="text">传感器低电量</span>
              <button class="number2">{{ lowBattery }}</button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 单独卡片大 -->
    <div class="boss" v-for="(item, index) in name" :key="index">
      <!-- 双重for循环卡片 -->
      <el-card class="box-card mt-10">
        <template #header>
          <div class="card-header">
            <span class="card-box2">{{ index }}</span>
          </div>
        </template>
        <div class="text item2">
          <div class="flex fww jc-sb">
            <!-- <div class="item2-box3 flex fdc aic jc-sa" v-if="item.length == 0">
              <p>暂无数据</p>
            </div> -->
            <div class="item2-box flex fdc aic jc-sa">
              <i
                data-v-76092859=""
                class="icon iconfont icon-yalichuanganqi icon2"
                style="color: gray"
              ></i>
              <p class="itemtext">43%Rh</p>
              <p>土壤温湿度</p>
              <p>EUI: 2XB16420832</p>
              <!-- <i
                data-v-76092859=""
                class="icon iconfont icon-yalichuanganqi icon2"
                style="color: gray"
              ></i>
              <p class="itemtext">43%Rh</p>
              <p>土壤温湿度</p>
              <p>EUI: 2XB16420832</p> -->
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import * as api from "@/api/index";
import { onMounted, ref } from "@vue/runtime-core";

// 设备概览渲染
const LoRaPP = ref("");
const LoRaWAN = ref("");
const group = ref("");
//传感器节点
const sensor = ref("");
//监控
//离线
const offline = ref("");
//低电量
const lowBattery = ref("");
//列表内容
//name
const name = ref("");
//渲染头部
const getCount = () => {
  api.$deviceCount().then((res) => {
    console.log(res);
    LoRaPP.value = res.data.LoRaPP;
    LoRaWAN.value = res.data.LoRaWAN;
    group.value = res.data;
    sensor.value = res.data.sensor;
    offline.value = res.data.sensor.offline;
    lowBattery.value = res.data.sensor.lowBattery;
  });
};
//渲染列表
const coundList = () => {
  api.$deviceSensorList().then((res) => {
    console.log(res);
    name.value = res.data;
  });
};
onMounted(() => {
  getCount();
  coundList();
});
</script>

<style lang="less" scoped>
/* 顶部 */
.data {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .el-card {
    --el-card-border-color: var(--el-border-color-light);
    --el-card-border-radius: 4px;
    --el-card-padding: none;
    --el-card-bg-color: var(--el-fill-color-blank);
  }

  //   设备概览
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .item img {
    width: 51px;
    height: 95px;
  }
  .item .gateway1 .gateway-box {
    font-size: 35px;
    font-weight: bold;
  }
  .item .gateway1 .gateway-box2 {
    font-weight: bold;
  }
  .item .gateway1 .gateway-box3 {
    font-weight: bold;
  }
  .item .fonts {
    font-size: 48px;
  }
  .interval {
    width: 2px;
    height: 60px;
    background-color: #e9eef6;
  }
  .interval2 {
    width: 2px;
    height: 127px;
    background-color: #e9eef6;
  }
  .box-card2 {
    width: 71%;
  }

  .card-headerleft {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .textleft {
    font-size: 14px;
    height: 100px;
    padding: 10px;
  }

  .itemleft {
    margin-bottom: 18px;
  }

  .box-cardleft {
    width: 28%;
  }
  /* 监控 */
  .textleft .monitoring .monitoring-box .text {
    font-weight: bold;
  }
  .textleft .monitoring .monitoring-box .number {
    width: 46px;
    height: 21px;
    background: rgba(85, 179, 100, 0.2);
    border-radius: 21px;
    color: #3f8c4b;
    line-height: 21px;
    border: none;
  }
  .textleft .monitoring .monitoring-box .number2 {
    width: 46px;
    height: 21px;
    border-radius: 21px;
    line-height: 21px;
    background: rgba(236, 70, 78, 0.2);
    color: #ec464e;
    border: none;
  }
  // 单独卡片
  .text2 {
    font-size: 14px;
  }

  .item2 {
    margin-bottom: 18px;
  }
  .item2 .item2-box {
    width: 150px;
    height: 134px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    box-shadow: 0 0 12px hsl(0deg 0% 83% / 30%);
    font-size: 14px;
  }
  .item2 .icon2 {
    font-size: 48px;
  }
  .item2 .itemtext {
    font-size: 18px;
    font-weight: bold;
  }
  .card-box2 {
    color: #1f1f1f;
  }
  .item2 .item2-box3 {
    font-size: 16px;
    width: 130px;
    height: 60px;
    border-radius: 3px;
    box-shadow: 0 0 12px hsl(0deg 0% 83% / 30%);
    font-size: 14px;
  }
}
</style>
